<template>
  <div>
    <crumb/>
    <div class="content">
      <!--  顶部区域 -->
      <div class="title-box">
        <select-course-class @changeCourse="changeCourse"></select-course-class>
        <div class="jindu">进度：{{progress}}/{{caseList.length}}</div>
        <div class="linxian">领先{{middle.leadRate}}%的学生</div>
      </div>
      <!--   表格   -->
      <el-table
        :data="caseList"
        style="width: 100%;margin-top: -1px;">
        <el-table-column
          type="index"
          align="center"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="caseName"
          align="center"
          label="案例标题"
          width="280">
        </el-table-column>
        <el-table-column
          prop="linKNum"
          align="center"
          label="流程" width="120">
        </el-table-column>
        <el-table-column
          prop="taskNum"
          align="center"
          label="任务" width="100">
        </el-table-column>
        <el-table-column
          prop="score"
          align="center"
          label="最新得分" width="100">
        </el-table-column>
        <el-table-column
          prop="finishedFlag"
          align="center"
          label="状态" >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.finishedFlag == 2" type="success">已完成</el-tag>
            <el-tag v-if="scope.row.finishedFlag == 1" type="warning">进行中</el-tag>
            <el-tag v-if="scope.row.finishedFlag == 0" type="info">未作答</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="intoCase(scope.$index)"
              type="text"
              size="small">
              进入案例
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import SelectCourseClass from '@/components/SelectCourseClass.vue'
import { multipleIndex } from '@/api/student/training/multiple.js'

export default {
  name: 'multiple',
  data () {
    return {
      caseList: [],
      content: {},
      showContent: false,
      middle: {},
      progress: 0 // 进度
    }
  },
  methods: {
    /**
      * 获取首页数据
      */
    async getMultipleIndex () {
      const res = await multipleIndex({})
      const data = res
      this.caseList = data.caseList
      this.content = data.content
      this.showContent = data.showContent
      this.middle = data.middle
      data.caseList.forEach((item) => {
        if (item.finishedFlag === '2') {
          this.progress++
        }
      })
    },
    /**
      * 进入案例
      * @param index
      */
    intoCase (index) {
      this.$router.push({ name: 'multipleMain', query: { resourceCaseId: this.caseList[index][`resourceCaseId`] } })
    },
    /**
      * 切换课程，重新加载数据
      * @param item
      */
    changeCourse (item) {
      console.log(item)
    }
  },
  mounted () {
    this.getMultipleIndex()
  },
  components: {
    SelectCourseClass
  }
}
</script>

<style scoped lang="scss">
  .content {
    width: 100%;
    height: 100%;
    .title-box {
      display: flex;
      .jindu{
        box-sizing: border-box;padding-top: 10px;margin-left: 20px;font-size: 14px;
      }
      .linxian{
        box-sizing: border-box;padding-top: 10px;margin-left: 30px;font-size: 14px;
      }
    }
  }
</style>
